<template>
    <el-card class="login-card-box">
        <span>登录</span>
        <el-input  v-model="userName" placeholder="请输入用户名" class="login-input user-name-input"></el-input>
        <el-input  v-model="userPass" placeholder="请输入密码" class="login-input user-pass-input"></el-input>
        <el-button type="primary" v-on:click="onloginClick">登录</el-button>
    </el-card>
</template>
<script>

export default {
    
    name:"LoginPage",
    data () {
    return {
      userName: '',
      userPass: ''
    }
    },

    methods:{
        onloginClick:function(){
            if(this.$utils.isEmpty(this.userName)){
                 this.$message('请输入用户名');
                return
            }
            if(this.$utils.isEmpty(this.userPass)){
                 this.$message('请输入密码');
                return
            }
        }
    }
   
  
}
</script>

<style>
    .login-card-box{
        width: 40%;
        margin:0 auto;
        text-align: center;
        margin-top: 10%;
    }

    .login-card-box .login-input{
        width: 60%;
        margin: 18px auto;
        display: block;
    }

    
</style>

